<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>Count: {{ this.$store.state.countNum }}</div>
    <div>Count: {{ this.$store.state.storeA.countA }}</div>
    <div>Count: {{ this.$store.state.storeB.countB }}</div>
    <button @click="testWsSend">Click Me</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  setup() {
    let timer;

    return {
      timer
    }
  },

  mounted() {
    this.timer = setInterval(() => {
      this.$store.commit('increment')
    }, 1000)
  },

  methods: {
    increment() {
      this.$store.commit("increment")
      this.$store.commit('storeA/incrementA')
      this.$store.commit('storeB/incrementB')
    },
    testWsSend() {
      this.$store.commit('sendWsMsg')
    }
  },

  beforeUnmount() {
    clearInterval(this.timer)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
